<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $(".firstname").keyup(function(){
   var firstname = $(".firstname").val();
    $.ajax({url:"http://localhost/php/ajax/auto.php?value=" +firstname,
	
	
	success:function(result){
	//alert('sss');
	  $(".option").show();
      $(".option").html(result);
		  $(".option").each(function(){
			  $(".option ul li").click(function(){
				  var textvalue = $(this).html();
				  $(".firstname").val(textvalue);
			  //alert($(this).attr('id'));
				  var roleid = $(this).attr('id');
				  $(".roleid").val(roleid);
			  });
		  });
    },
	
	
	error:function(result){
      $(".option").html(result);
    }
	
	
	
	});
  });
});
</script>
</head>
<body>
<label>rolename</label>
<input type="text" class="firstname" />
<label>roleid</label>
<input type="text" class="roleid" />
<div class="option" style="display:none;  border: 1px solid;
    height: 39px;
    left: 59px;
    margin-right: 103px;
    overflow-x: auto;
    overflow-y: scroll;
    position: relative;
    width: 143px;"></div>

</body>
</html>
